<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 800px;
            height: 600px;
            position: relative;
            margin: 100px auto;
            background: #000000;
            border: 2px solid red;
            overflow: hidden;
        }

        .ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="box"></div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="../js/1.js"></script>
    <script>
        // 动画  :
        // animate(); 以结果为导向进行 jQuery ;
        // 选择元素 : $(选择符)
        // $("#box").animate({
        //     width : 100,
        //     height : 100
        // },5000)

        function FireWork(box) {
            this.box1 = document.querySelector(box);
            this.Generate()
            this.autoFire()
        }

        FireWork.prototype.Generate = function () {
            let _this = this
            _this.box1.onclick = function (e) {
                _this.e = e || window.event;
                let up = _this.Up()
                // let 
                let x = e.offsetX + "px"
                up.style.left = x
                $(up).animate({
                    top: e.offsetY
                }, 2000, function () {
                    up.remove()
                    _this.boom()
                })
            }
        }

        FireWork.prototype.Up = function () {
            let _this = this
            let div = document.createElement("div")
            div.className = "ball"
            div.style.background = color()
            _this.box1.appendChild(div)
            return div
        }

        FireWork.prototype.boom = function () {
            let _this = this
            for (let i = 0; i < 360; i = i + 15) {
                let up = _this.Up()
                up.style.left = _this.e.offsetX + "px"
                up.style.top = _this.e.offsetY + "px"
                let x = _this.e.offsetX + Math.sin(Math.PI / 180 * i) * ((Math.random().toFixed(1)) * 50 + 80)
                let y = _this.e.offsetY + Math.cos(Math.PI / 180 * i) * ((Math.random().toFixed(1)) * 50 + 80)
                $(up).animate({
                    left: x + "px",
                    top: y + "px"
                }, 2000, function () {
                    up.remove()
                })
            }

        }

        FireWork.prototype.autoFire = function () {
            let _this = this;
            setInterval(function () {
                let x = Math.round(Math.random() * _this.box1.offsetWidth);
                if (x < 0) {
                    x = x + 100
                }
                if (x > 800) {
                    x = x - 100
                }
                let y = Math.round(Math.random() * _this.box1.offsetHeight);
                if (y < 0) {
                    y = y + 100
                }
                if (y > 600) {
                    y = y - 100
                }

                _this.box1.onclick({
                    offsetX: x,
                    offsetY: y
                })
            }, 3000)
        }
        let firework = new FireWork("#box")
    </script>
</body>

</html>